<template>
	<view class="selectSex">
		<view class="selectPic me-fx-row-sa-c">
			<view class="selectPicBox " @click="selectPicBtn(index)" :class="[Index == index?'active':'']" v-for="(item, index) in selectList">
				<image :src="item.src" mode="" class="boy"></image>
				<view class="">
					{{item.sex}}
				</view>
			</view>
		</view>
		<view class="nextBtn" @click="nextBtn">
			下一步
		</view>
		<view class="label">
			选择性别后无法修改
		</view>
		<!-- 弹窗 -->
				<view class="Covering" v-if="withdrawTK">
					<view class="withdrawTK">
						<image src="../../static/img/f6b8c0d387a54a3aa017c1e17b074df.png" mode=""></image> 
						<view class="rink">
							提示
						</view>
						<view class="conter">
							注册后将不能修改性别，确定吗? 提 示: 你将不能与相同性别的用户交流。
						</view>
						<view class="btnBox me-fx-row-sb-c">
							<view class="cancelBtn" @click="cancelBtn">
								取消
							</view>
							<view class="sureBtn" @click="sureBtn">
								确定
							</view>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Index: -1,
				selectList: [{
					src: '../../static/img/boy.png',
					sex: '男士'
				}, {
					src: '../../static/img/girl.png',
					sex: '女士'
				}],
				storage:{},
				withdrawTK:false
			}
		},
		methods: {
			selectPicBtn(index) {
				this.Index = index
			},
			cancelBtn(){
				this.withdrawTK=false
			},
			sureBtn(){
				this.withdrawTK=false;
				uni.navigateTo({
					url: './invitation'
				})
			},
			nextBtn() {
				this.withdrawTK=true
				uni.getStorage({
					key: 'item',
					success:(e)=> {
						this.storage=e.data //这就是你想要取的token
					}
				})
				this.storage.gender=this.Index+1
				uni.setStorage({
				    key: 'item2',
				    data: this.storage,
				});
			}
		}
	}
</script>

<style>
	.active {
		border: 2rpx solid rgba(92, 20, 255, 1);
	}

	.selectPic {
		width: 100%;
		margin: 152rpx auto 226rpx;
	}

	.selectPic .selectPicBox {
		width: 210rpx;
		height: 210rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(108, 43, 255, 0.2);
		border-radius: 50%;
	}

	.selectPicBox image {
		width: 92rpx;
		height: 106rpx;
		display: block;
		margin: 27rpx auto 19rpx;
	}

	.selectPicBox view {
		text-align: center;
	}

	.nextBtn {
		width: 681rpx;
		height: 88rpx;
		background: rgba(92, 20, 255, 1);
		opacity: 0.9;
		border-radius: 44rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 88rpx;
		text-align: center;
		margin: auto;
	}

	.label {
		text-align: center;
		width: 100%;
		margin: 46rpx auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 51, 1);
		line-height: 64rpx;
	}
	.withdrawTK {
		width: 86%;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		background-color: white;
		margin: 350rpx auto;
		overflow: hidden;
	}
	
	.withdrawTK image {
		width: 101%;
		height: 172rpx;
	}
	
	.inputValue {
		height: 38rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(205, 205, 205, 1);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: rgba(85, 85, 85, 1);
		line-height: 98rpx;
		margin: auto;
		margin: 26rpx 48rpx;
		padding: 30rpx;
	}
	
	.btnBox {
		padding: 48rpx;
		box-sizing: border-box;
	
	}
	
	.btnBox .cancelBtn,
	.btnBox .sureBtn {
		width: 228rpx;
		height: 80rpx;
		border: 1rpx solid #824CFE;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}
	
	.cancelBtn {
		background: rgba(255, 255, 255, 1);
		color: #824CFE;
	}
	
	.sureBtn {
		background-color: #824CFE;
		color: white;
	}
	.rink{
		font-size:36rpx;
		font-weight:bold;
		color:rgba(51,51,51,1);
		text-align: center;
	}
	 .conter{
		font-size:30rpx;
		color:rgba(85,85,85,1);
		line-height:48rpx;
		padding: 40rpx 50rpx;
	}
</style>
